<!-- @author zhengjie -->
<template>
  <div class="icon-body">
    <!-- 头部导航++++++++++++++++++++++ -->
    <div class="space-between center nav">
      <div class="center">
        <img @click="toUrl('/login')" class="cursor log" referrerpolicy="no-referrer" src="@/assets/logo/log.png" />


        <div class=" cursor f_bold ml_50 f_18 color_fff " :class="{atc:selectedTab=='home'}" @click="toUrl('/login')">
          学院首页</div>

        <div class=" cursor f_bold ml_50 f_18 color_fff" :class="{atc:selectedTab=='college'}"
          @click="toUrl('/college/introductory')">学院简介</div>

        <div class=" cursor f_bold ml_50 f_18 color_fff" :class="{atc:selectedTab=='teacher'}"
          @click="toUrl('/teacher/list')">名师风采</div>

        <div class=" cursor f_bold ml_64 f_18 color_fff" :class="{atc:selectedTab=='job'}" @click="toUrlr('/job/list')">
          学员就业</div>

        <div class=" cursor f_bold ml_50 f_18 color_fff" :class="{atc:selectedTab=='course'}"
          @click="toUrl('/course/videoCateg')">视频分类</div>


       <div class=" cursor f_bold ml_50 f_18 color_fff" :class="{atc:selectedTab=='skill'}"
          @click="toUrlr('/skill/index')">技能认证</div>


       <!--  <div class=" cursor f_bold ml_50 f_18 color_fff" :class="{atc:selectedTab=='attestation'}"
             @click="toUrlr('/attestation/index')">技能认证</div> -->

        <!--  <div class=" cursor f_bold ml_50 f_18 color_fff" :class="{atc:selectedTab=='attestation'}"
          @click="toUrlr('/skill/index')">技能测试</div> -->




      </div>

      <div class="row center input_s" style="margin-right: 150px;">

        <!--  <el-input style="margin-right: 20px;" v-model="inputContent" placeholder="请输入" size="medium"> -->
        <div class="mr_48">
          <el-select :loading="loading" v-model="selectedItem" multiple filterable remote reserve-keyword
            @change="handleCh" :remote-method="searchItems" placeholder="请输入">
            <el-option v-for="item in searchResults" :key="item.id" :value="item.id" :label="item.title"></el-option>
          </el-select>
          <!-- <el-button slot="append" icon="el-icon-search" @click="searchItems"></el-button> -->
        </div>






        <div v-if="username" class="row center">

          <div class="center mr_5 cursor" @click="toUrl('/mine/myCenter')">
            <el-avatar :size="40" :src="avatar"></el-avatar>
          </div>
          <div class="f18 f_bold cursor color_fff" style="white-space:nowrap" @click="toUrl('/mine/myCenter')">
            {{username}}
          </div>
          <div class="f18 f_bold cursor ml_16 color_fff" style="white-space:nowrap" @click.stop="logout">退出</div>
        </div>

        <div v-else class="row center" style="width: 200px;">
          <div class="center mr_5 cursor">
            <img style="height: 35x;width: 42px;" src="@/assets/images/per.png"></img>
          </div>
          <div @click.prevent="childMethod(1)" class="f18 f_bold  cursor ml_16 color_fff">登录/注册</div>
        </div>
      </div>
    </div>
    <!-- 头部导航=============== -->

    <!-- 模态框 -->
    <div class="ymd">
      <el-dialog @open="openDialog()" style="margin-top: 160px;" :close-on-click-modal="false"
        :visible.sync="dialogShow" width="735px" @close="closeDialog()">

        <div class="row">
          <div class="loga">
            <div class="center mt_40">
              <img style="width: 100px;height: 100;border-radius: 100px;" src="../../assets/images/zx.png" />
            </div>

            <div class="row_a_c mt_60 ml_25">
              <i style="color: #F2CA21;font-size: 30px;" class="el-icon-check"></i>
              <div class="f_18 color_fff">免费学习<span style="color: #F2CA21;">8100+</span>个教程</div>
            </div>

            <div class="row_a_c ml_25 mt_36">
              <i style="color: #F2CA21;font-size: 30px;" class="el-icon-check"></i>
              <div class="f_18 color_fff">名师<span style="color: #F2CA21;">100+</span>人在线教学</div>
            </div>


            <div>


              <div class="row_a_c ml_25 mt_36">
                <i style="color: #F2CA21;font-size: 30px;" class="el-icon-check"></i>
                <div class="f_18 color_fff">昨日学员已学习了<span style="color: #F2CA21;">7154</span>次</div>
              </div>

              <div>
                <div class="f_18 color_fff" style="margin-left: 53px;margin-top: 5px;">并且发出好评！</div>
              </div>

            </div>

          </div>
          <div class="logb">

            <div class="row_a_c mt_40 ml_64">
              <div class=" f_bold color_000 mr_5" style="font-size: 29px;">登录后</div>
              <div class="" style="margin-top: 15px;font-size: 17px;">立即学习！</div>
            </div>


            <div style="margin-left: 60px;margin-right: 60px;margin-top: 60px;">

              <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                <el-form-item prop="mobile">
                  <el-input class="mt_10" placeholder="请输入手机号" v-model="loginForm.mobile" clearable></el-input>
                </el-form-item>

                <div class="row ">
                  <el-form-item prop="code">
                    <el-input class="mt_20 " placeholder="请输入验证码" v-model="loginForm.code" clearable></el-input>
                  </el-form-item>
                  <el-button :disabled="disable" class="lzm center f_15 color_fff mt_20 cursor" @click.stop="sendSms()">
                    {{buttonName}}</el-button>
                </div>


              </el-form>


              <div class="mt_20 row center">
                <div class="row ">
                  <div class="ml_5 f_14 ">登录即同意
                    <span @click="yhxxf" class="cursor" style="color: #3B88FE;">《注册协议》＆《隐私协议》</span>
                  </div>
                </div>
              </div>
              <el-button size="medium" style="width: 100%;height: 40px;" class="mt_10" type="primary"
                @click="handleLogin('mobile')">立即登录</el-button>

              <div class="row center mt_20 ">
                <div class=" row center mr_48">
                  <div class="row_a_c">
                    <img style="width: 18px;height: 18px;margin-right: 5px;" src="../../assets/images/qq.png" />
                    <div>QQ登录</div>
                  </div>
                </div>

                <div class=" row center">
                  <div class="row_a_c">
                    <img style="width: 18px;height: 18px;margin-right: 5px;" src="../../assets/images/wx.png" />
                    <div @click="wxdl">微信登录</div>
                  </div>
                </div>

              </div>




            </div>

          </div>
        </div>
      </el-dialog>
    </div>


    <el-dialog title="开发者协议" :visible.sync="yhxx" width="100%" center style="margin-top: -60px;">
      <span v-html="kfzxx"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="yhxx = false">取 消</el-button>
        <el-button type="primary" @click="yhxx = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    getToken,
    setToken,
    removeToken
  } from '@/utils/auth'
  import * as User from "@/api/system/user";
  import * as News from "@/api/system/news";
  import * as Datum from "@/api/system/datum";
  import * as Login from "@/api/login";
  import * as Course from "@/api/operation/course";
  export default {
    name: 'Navv',



    props: {
      selectedTab: {
        type: String,
        default: 'home'
      },

    },


    data() {
      return {
        loading: false,
        selectedItem: '',
        searchResults: [],
        count: 59,
        buttonName: "获取验证码",
        kfzxx: '',
        disable: false,
        yhxx: false,
        loginForm: {
          mobile: '13611111111'
        },
        loginRules: {
          mobile: [{
            required: true,
            trigger: "blur",
            message: "请输入您的账号"
          }],
          code: [{
            required: true,
            trigger: "blur",
            message: "请输入验证码"
          }]
        },
        inputContent: '',
        user_info: {
          audit_status: 3,
        }, //用户详情
        avatar: '',
        username: '',
        user_id: '',
        dialogShow: false

      }
    },



    created() {
      var token = getToken();
      if (token) {
        this.getUserInfo(); //查询用户详情
      } else {
        localStorage.clear()
      }
      this.getUserAgreement(); //获取用户协议
      // 读取缓存
      this.username = localStorage.getItem('username')
      this.avatar = localStorage.getItem('avatar')
      this.user_id = localStorage.getItem('user_id')
    },

    methods: {
      searchItems(query) {
        console.log('query', query)
        if (query) {
          var per = {
            title: query,
          };
          this.loading = true;
          Course.List(per).then((response) => {
            this.searchResults = response.data.rows;
            this.loading = false;
          });
        }
      },

      handleCh(value) {
        console.log('value', value[0])
        this.toUrlid('/course/details', value[0])
      },

      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {

            this.$store.dispatch("Login", this.loginForm).then(() => {
              this.$router.push({
                path: this.redirect || "/"
              }).catch(() => {});
            }).catch(() => {

            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      // 微信登陆
      wxdl() {
        var redirectURI = 'http://www.zdindin.com/'; ///扫码后回调地址
        var appId = 'wx515d8d1893f1e1f5'; //公众号平台提供的appIdlet
        window.location.href = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appId + '&redirect_uri=' +
          redirectURI + '&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect'
      },

      //发送短信
      sendSms() {

        if (!this.loginForm.mobile) {
          this.$message({
            message: '手机号不能为空',
            type: 'warning'
          });
          return
        }


        if (this.disable == true) {
          this.$message({
            message: '请勿重复点击',
            type: 'warning'
          });
          return
        } else {
          var timeout = setInterval(() => {
            if (this.count < 1) {
              this.disable = false;
              this.buttonName = "获取验证码";
              this.count = 59;
              clearInterval(timeout);
            } else {
              this.disable = true;
              this.buttonName = this.count-- + "s后重发";
            }
          }, 1000);

        }




        this.loading = true;
        Login.sendSms({
          mobile: this.loginForm.mobile
        }).then(response => {
          this.$set(this.loginForm, 'code', response.data);
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.loading = false;
        });
      },

      yhxxf() {
        this.yhxx = true
      },

      //关闭模态框
      closeDialog() {

      },
      //打开模态框
      openDialog() {

      },
      searchput() {

      },

      /**获取用户协议 */
      getUserAgreement() {

        // this.loading = true;
        Datum.Show(2).then(response => {
          this.kfzxx = response.data.content
          // this.GameList = response.data.rows;
          // this.game_count = response.data.total;
          // this.loading = false;
        });
      },
      /**查询用户详情 */
      getUserInfo() {
        //audit_status 1：未提交，2：已提交 3：审核通过 4：审核失败'

        this.loading = true;
        User.getUserInfo().then(response => {
          this.user_info = response.data
          localStorage.setItem('username', response.data.username)
          localStorage.setItem('avatar', response.data.avatar)
          localStorage.setItem('user_id', response.data.id)
          console.log('用户详情Navv', this.user_info)
          this.loading = false;
        });
      },


      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            localStorage.clear();
            location.href = '/index';
          })
        }).catch(() => {});
      },


      toUrlid(url, id) {
        var token = getToken();
        if (!token) {
          this.$message({
            message: '请先登录',
            type: 'warning'
          });
          return
        }
        this.$router.replace({
          path: url,
          query: {
            id: id,
          }
        })
      },

      toUrlr(url) {
        var token = getToken();
        if (!token) {
          this.$message({
            message: '请先登录',
            type: 'warning'
          });
          return
        }
        this.$router.push({
          path: url
        })
      },

      toUrl(url) {
        console.log('src/components/Navv/index.vue', url)
        this.$router.push({
          path: url
        })
      },


      childMethod(type) {
        //type 1登录 2注册
        // this.$parent.fatherMethod(type);
        this.dialogShow = !this.dialogShow
      }

    }
  }
</script>

<style lang="scss" scoped>
  .atc {
    color: #0029d9;
    // height: 30px;
    // width: 100px;
    // line-height: 30px;
    // text-align: center;
  }

  .nav {
    background: #448DFF;
    height: 70px;

  }

  .log {
    width: 165px;
    height: 40px;
    margin-left: 50px;
  }

  .kfzdj {
    width: 120px;
    height: 38px;
    background: #1a82fb;
    border-radius: 5px;

    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    color: #fff;
  }

  .boxs1 {
    padding: 10px;
    width: 150px;
    height: 95px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(125, 124, 130, 0.5);
    border-radius: 5px;
    position: fixed;
    top: 70px;
    left: 520px;
  }

  .boxs2 {
    padding: 10px;
    width: 150px;
    height: 95px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(125, 124, 130, 0.5);
    border-radius: 5px;
    position: fixed;
    top: 70px;
    left: 690px;
  }

  .xjt {
    font-size: 22px;
    margin-top: 5px;
    margin-left: 5px;
  }

  .qugwbt {
    width: 95px;
    height: 37px;
    background: #1A82FB;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    font-size: 18px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 22px;
    font-weight: bold;
  }

  .loga {
    width: 300px;
    height: 440px;
    background: rgba(0, 0, 0, 0.6);
  }

  .logb {
    width: 435px;
    background: #FFFFFF;
    height: 440px;
  }

  .lzm {
    width: 110px;
    height: 38px;
    background: #1A82FB;
    border-radius: 0px 5px 5px 0px;
  }

  .ymd {
    ::v-deep .el-dialog {
      background-color: transparent;

    }
  }


  ::v-deep .el-dropdown {
    display: inline-block;
    position: relative;
    color: #000000;
    font-size: 18px;
    font-weight: bold;
  }

  ::v-deep .el-icon-arrow-down:before {
    font-size: 20px;
    content: "";
  }

  ::v-deep .el-input-group--append .el-input__inner {
    background: #448DFF !important;
    height: 35px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid #fff !important;
  }

  ::v-deep .el-dialog__body {
    padding: 0;
  }

  ::v-deep .el-dialog__header {
    padding: 0px;
    padding-bottom: 0px;
  }

  ::v-deep .el-input--medium .el-input__inner {
    height: 40px;
    line-height: 40px;
    background: #F8F8F8;
    border-radius: 4px;
    border: 0px solid #F8F8F8;

  }

  ::v-deep .el-input-group__append button.el-button,
  .el-input-group__append div.el-select .el-input__inner,
  .el-input-group__append div.el-select:hover .el-input__inner,
  .el-input-group__prepend button.el-button,
  .el-input-group__prepend div.el-select .el-input__inner,
  .el-input-group__prepend div.el-select:hover .el-input__inner {
    background: #fff;
  }

  .input_s {
    ::v-deep .el-input__inner::placeholder {
      color: #fff;
    }

    /* 谷歌 */
    ::v-deep .el-input__inner::-webkit-input-placeholder {
      color: #fff;
    }

    /* 火狐 */
    ::v-deep .el-input__inner:-moz-placeholder {
      color: #fff;
    }

    /*ie*/
    ::v-deep .el-input__inner:-ms-input-placeholder {
      color: #fff;
    }

    ::v-deep .el-input__inner {
      color: #fff
    }


    ::v-deep .el-icon-search:before {
      color: #448DFF;
    }


    ::v-deep .el-input--medium .el-input__inner {
      height: 35px;
      line-height: 30px;
      background: #448DFF;
      border-radius: 4px;
      border: 1px solid #F8F8F8;
    }


  }
</style>
